// https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js

const genSizeMap = (size) =>
  Array.from({ length: size }).reduce(
    (map, _, i) => ({
      ...map,
      [i]: `${i}px`,
    }),
    {},
  );

module.exports = {
  prefix: '',
  theme: {
    extend: {
      keyframes: {
        winHeartBeat: {
          from: { transform: 'scale(1)' },
          to: { transform: 'scale(1.5)' },
        },
        heartBeat: {
          '0%,20%,40%,100%': { transform: 'scale(1)' },
          '10%,30%': { transform: 'scale(1.6)' },
        },
      },
      animation: {
        winHeartBeat: 'winHeartBeat 0.5s ease-in-out infinite alternate',
        heartBeat: 'heartBeat 1.5s infinite',
      },
      backgroundSize: {
        'size-full': '100% 100%',
      },
      fontSize: { ...genSizeMap(100) },
      padding: { ...genSizeMap(100) },
      spacing: { ...genSizeMap(100) },
      borderRadius: { ...genSizeMap(100) },
      width: {
        ...genSizeMap(100),
        full: '100%',
      },
      height: {
        ...genSizeMap(100),
        full: '100%',
      },
      lineHeight: { ...genSizeMap(100) },
      minHeight: {
        ...genSizeMap(100),
        contentHeight: 'calc(100vh - 48px)',
      },
      colors: {
        theme: {
          950: '#15142B',
          900: '#15142B',
        },
        red: {
          DEFAULT: 'red',
        },
        white: {
          DEFAULT: 'rgba(255,255,255, 1)',
          700: 'rgba(255,255,255, 0.7)',
          500: 'rgba(255,255,255, 0.5)',
          300: 'rgba(255,255,255, 0.3)',
          200: 'rgba(255,255,255, 0.2)',
          100: 'rgba(255,255,255, 0.1)',
        },
        black: {
          DEFAULT: 'rgba(0,0,0, 1)',
          300: 'rgba(0,0,0, 0.3)',
          400: 'rgba(0,0,0, 0.4)',
          500: 'rgba(0,0,0, 0.4)',
          700: 'rgba(0,0,0, 0.7)',
          800: 'rgba(0,0,0, 0.8)',
        },
        btnBgc: [
          '#FF693A', // 0
          '#ff004c', // 1
          '#2e2c4a', // 2
          '#EA9B00', // 3
          '#E56000', // 4
          '#1E1D3A', // 6
        ].reduce((map, _, i) => ({ ...map, [i]: _ }), {}),
        bc: [
          'rgba(255, 255, 255, 0.1)', // 0.分割线    下拉框描边
          'rgba(255, 255, 255, 0.1)', // 1.时间边框输入边框
          '#2E2C4A', // 2.默认搜索边框
          '#677193', // 3.选中搜索边框
          '#403F57', // 4.登录按钮边框
          '#677193', // 5.选中输入框 描边效果
        ].reduce((map, _, i) => ({ ...map, [i]: _ }), {}),
        fcs: [
          '#FF0043', // 0.用于辅助
          '#B90B38', // 1.用于辅助
          '#F98837', // 2.用于辅助
          '#1BC741', // 3.用于辅助
          '#FF0043', // 4.首页底部 添加收藏 文字
        ].reduce((map, _, i) => ({ ...map, [i]: _ }), {}),
        fcw: [
          'rgba(255, 255, 255, 0.7)', // 0.内容文字
          'rgba(255, 255, 255, 0.5)', // 1.辅助文字
          'rgba(255, 255, 255, 0.5)', // 2.未选中按钮
          'rgba(255, 255, 255, 0.5)', // 3.底部导航默认
          'rgba(255, 255, 255, 0.3)', // 4.时间提示
          'rgba(255, 255, 255, 0.2)', // 5.输入框提示语/不可点文字
          '#99B1DB', // 6.链接字体色
          '#F98837', // 7.金额文字
        ].reduce((map, _, i) => ({ ...map, [i]: _ }), {}),
        bgc: [
          'var(--mantine-color-bgColor-0)', // '#0E0D1F', // 0.大背景色侧栏背景
          'var(--mantine-color-bgColor-1)', // 1.title背景
          'var(--mantine-color-bgColor-2)', // 2.title余额框
          'var(--mantine-color-bgColor-3)', // 3.顶部app下载
          'var(--mantine-color-bgColor-4)', // 4.个人中心 金额背景
          'var(--mantine-color-bgColor-5)', // 5.活动页面 返水背景
          'var(--mantine-color-bgColor-6)', // 6.文字底板弹窗底色首页下部
          'var(--mantine-color-bgColor-7)', // 7.侧栏厂商底色
          'var(--mantine-color-bgColor-8)', // 8.输入框底色下拉框底色
          'var(--mantine-color-bgColor-9)', // 9.下拉选中
          'var(--mantine-color-bgColor-10)', // 10.个人中心 充值提现 背景
          'var(--mantine-color-bgColor-11)', // 11.公告滚动条
          'var(--mantine-color-bgColor-12)', // 12.语言切换框
          'var(--mantine-color-bgColor-13)', // 13.厂商选中背景
          'var(--mantine-color-bgColor-14)', // 14.首页下半部厂商底色
          'var(--mantine-color-bgColor-15)', // 15.充值页面余额背景
          'var(--mantine-color-bgColor-16)', // 16.底部导航选中 横线
          'var(--mantine-color-bgColor-17)', // 17.底部导航选中特效]
        ].reduce((map, _, i) => ({ ...map, [i]: _ }), {}),
      },
    },
  },
  content: ['./src/**/*.tsx', './src/components/**/*.tsx', './src/layouts/**/*.tsx'],
};
